<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">企业名称：</div>
      <el-input v-model="params.enterpriseName" clearable placeholder="请输入内容" class="search-main" />
      <div class="search-label">缴费时间：</div>
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="search-main"
        value-format="yyyy-MM-dd"
        @change="dateChangeEv1"
      />
      <el-button type="primary" @click="searchFn">查询</el-button>

    </div>
    <div class="create-container">
      <el-button v-auth-dir="`park:propertyFee:add`" type="primary" @click="showAddPropertyDialog">添加账单</el-button>
    </div>
    <!-- 表格区域 -->
    <div v-auth-dir="`property:propertyFee:list`" class="table">
      <el-table style="width: 100%" :data="billList">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="billNumber" label="账单编号" />
        <el-table-column label="企业名称" width="320" prop="enterpriseName" />
        <el-table-column label="租赁楼宇" width="320" prop="buildingName" />
        <el-table-column label="物业费(元/m²)" prop="propertyFeePrice" />
        <el-table-column
          label="账单金额(元)"
          prop="paymentAmount"
        />
        <el-table-column
          label="缴费时间"
          prop="createTime"
        />
        <el-table-column label="操作">
          <template v-slot:default="scope">
            <el-button v-auth-dir="`park:propertyFee:query`" size="mini" type="text" @click="getDetailFn(scope.row.id)">查看</el-button>
            <el-button v-auth-dir="`park:propertyFee:remove`" size="mini" type="text" @click="delExterprise(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-container">
      <el-pagination
        layout="total, prev, pager, next"
        :total="enterpriseTotal"
        :page-size="params.pageSize"
        @current-change="currentChangeFn"
      />
    </div>
    <!-- 添加账单对话框 -->
    <el-dialog :title="title" :visible.sync="addDialogVisible" width="580px" @close="closeDialog">
      <!-- 表单区域 -->
      <div v-if="title==='添加账单'" class="form-container">
        <!-- label-position：表单域上 label 值在表单域中的位置 -->
        <el-form ref="addForm" :model="rentForm" :rules="rentRules" label-position="top">
          <el-form-item label="选择租户" prop="enterpriseId">
            <el-select v-model="rentForm.enterpriseId" placeholder="请选择租户">
              <el-option
                v-for="item in enterpriseList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="租赁楼宇" prop="buildingId">
            <el-select v-model="rentForm.buildingId" placeholder="请选择租赁楼宇" @change="buildingChangeEv">
              <el-option
                v-for="item in buildingList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="缴费周期" prop="rentTime">
            <el-date-picker
              v-model="rentForm.rentTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="dateChangeEv2"
            />
          </el-form-item>
          <el-form-item label="支付金额" prop="paymentAmount">
            <el-input v-model="rentForm.paymentAmount" disabled placeholder="请输入支付金额" />
          </el-form-item>
          <el-form-item label="支付方式" prop="paymentMethod">
            <el-select v-model="rentForm.paymentMethod" placeholder="请选择支付方式">
              <el-option
                v-for="item in payList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div v-else class="detail">
        <p>租户名称 : <span>{{ detail.enterpriseName }}</span></p>
        <p>租赁楼宇 : <span>{{ detail.buildingName }}</span></p>
        <p>缴费周期 : <span>{{ detail.startTime }}至{{ detail.endTime }}</span></p>
        <p>物业费(元/m²) : <span>{{ detail.propertyFeePrice }}</span></p>
        <p>账单金额(元) : <span>{{ detail.paymentAmount }}</span></p>
        <p>支付方式 : <span>{{ detail.paymentMethodValue }}</span></p>
        <p>缴费时间 : <span>{{ detail.createTime }}</span></p>
      </div>
      <template #footer>
        <el-button size="mini" @click="closeDialog">取 消</el-button>
        <el-button size="mini" type="primary" @click="confirmAdd">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { deletePropertyAPI, getPropertyListAPI, getEnterpriseAPI, createBillAPI, getBuildingAPI, getPaymentAPI, getBillDetailAPI } from '@/apis/property'
export default {
  data() {
    return { // 搜索时间范围
      dateRange: [],
      // 查询参数对象
      params: {
        page: 1,
        pageSize: 10,
        enterpriseName: '', // 查询企业名字
        start: '',
        end: ''
      },
      buildingList: [], // 建筑列表
      billList: [], // 账单列表
      enterpriseList: [], // 企业列表
      enterpriseTotal: 0, // 企业列表总数
      addDialogVisible: false, // 新增合同对话框显示/隐藏
      rentForm: {
        enterpriseId: null, // 企业id
        buildingId: null, // 楼宇id
        paymentAmount: null, // 付款总额
        paymentMethod: null, // 付款方式1微信2支付宝3现金
        rentTime: [] // 合同时间
      },
      rentRules: {
        enterpriseId: [
          { required: true, message: '请选择租户', trigger: 'change' }
        ],
        buildingId: [
          { required: true, message: '请选择租赁楼宇', trigger: 'change' }
        ],
        rentTime: [
          { required: true, message: '请选择缴费周期', trigger: 'change' }
        ],
        paymentAmount: [
          { required: true, message: '请输入支付金额', trigger: 'change' }
        ],
        paymentMethod: [
          { required: true, message: '请选择支付方式', trigger: 'change' }
        ]
      },
      title: '',
      payList: [{ id: 1, name: '微信' }, { id: 2, name: '支付宝' }, { id: 3, name: '现金' }],
      detail: { enterpriseName: '',
        buildingName: '',
        startTime: '',
        endTime: '',
        propertyFeePrice: null,
        paymentAmount: null,
        paymentMethod: null,
        createTime: '' }
    }
  },
  created() {
    this.getList()
    this.getEnterpriseList()
    this.getBuildingList()
  },
  methods: {
    dateChangeEv1(date) {
      console.log(date)

      this.params.start = date[0]
      this.params.end = date[1]
    },
    async getDetailFn(id) {
      this.title = '查看账单'
      this.addDialogVisible = true
      const res = await getBillDetailAPI(id)
      console.log(res)
      this.detail = res.data
    },
    async buildingChangeEv(data) {
      if (this.rentForm.rentTime[0] && this.rentForm.rentTime[1]) {
        const obj = { buildingId: data, startTime: this.rentForm.rentTime[0], endTime: this.rentForm.rentTime[1] }
        const res = await getPaymentAPI(obj)
        // console.log(res)
        this.rentForm.paymentAmount = res.data
      }
    },
    async dateChangeEv2(date) {
      if (this.rentForm.buildingId) {
        const obj = { buildingId: this.rentForm.buildingId, startTime: date[0], endTime: date[1] }
        const res = await getPaymentAPI(obj)
        // console.log(res)

        this.rentForm.paymentAmount = res.data
      }
    },
    async getBuildingList() {
      const res = await getBuildingAPI()
      // console.log(res)
      this.buildingList = res.data
    },
    async getEnterpriseList() {
      const res = await getEnterpriseAPI()
      // console.log(res)

      this.enterpriseList = res.data
    },
    async getList() { // 获取列表
      const res = await getPropertyListAPI(this.params)
      this.billList = res.data.rows
      this.enterpriseTotal = res.data.total
    }, // 列表切换
    currentChangeFn(page) {
      this.params.page = page
      this.getList()
    }, // 查询
    searchFn() {
      this.getList()
      console.log('yes')
    },
    // 删除企业
    delExterprise(id) {
      this.$confirm('确认删除该账单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deletePropertyAPI(id)
        this.getList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    }, // 添加账单点击事件
    showAddPropertyDialog() {
      this.title = '添加账单'
      this.addDialogVisible = true
      // console.log(id)
    },
    // 关闭
    closeDialog() {
      this.addDialogVisible = false
    },
    // 提交表单创建合同
    async confirmAdd() {
      const obj = {
        ...this.rentForm
      }
      obj.startTime = this.rentForm.rentTime[0]
      obj.endTime = this.rentForm.rentTime[1]
      delete obj.rentTime
      const res = await createBillAPI(obj)
      console.log(res)
      this.$message.success(`${this.title}成功`)
      // 更新列表
      this.getList()
      // 关闭弹窗
      this.addDialogVisible = false
      // 重置表单
      this.$refs.addForm.resetFields()
    }

  }
}
</script>
<style lang="scss" scoped>
.department-container {
  padding: 10px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  ;
  padding-bottom: 20px;

  .search-label {
    width: 85px;
  }

  .search-main {
    width: 300px;
    margin-right: 20px;
  }

}
.create-container{
  margin: 10px 0px;
}
.page-container{
  padding:4px 0px;
  text-align: right;
}
.form-container{
  padding:0px 80px;
}
::v-deep .el-range-separator{
    width:25px;
  }
.detail
{ width:100%;
  p{
    display: flex;
    color: #909399;
    padding:0 100px;
    margin-bottom: 8px; /* 可选：增加行间距 */
    span{
      color:black;
      flex: 0 0 66.66666667%;
      max-width: 66.66666667%;
    }
}
}
</style>
